<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../static/layuiadmin/layui/css/layui.css" media="all">
    <style>
        body{background: #f9f9f9;}
        *{padding:0;margin: 0;box-sizing: border-box;}
        .c1{display: flex;}
        .c2{width: 160px;border-right: 1px solid #ccc;padding: 10px;position: fixed;left:0;top:0;height: 100%;}
        .c2 .active{color: #009688;}
        .c2 .active .c13{background-position: -110px -16px;}
        .c2 > div{line-height: 32px;cursor: pointer;font-size: 14px;}
        .c2 .layui-icon{margin-right: 5px;}
        .c3{padding-left: 160px;width: 100%;}
        .c6{width: 750px;margin: 50px auto 0;}

        .c4{
            flex: none;
            position: relative;
            text-align: center;
            vertical-align: middle;
            transition: .2s;
            border:1px solid #f9f9f9;
            background-color: #eee;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }
        .c4:hover{border:1px solid #c00;}
        .c4.active .c9{display: block;}
        .c5:hover .c11{display: block;}
        .c4::before,.c4::after{
            content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
        }
        .c5{padding: 10px;position: relative;
    flex-wrap: wrap;
    max-height: 460px;
    overflow-y: auto;}
    .c6 p{padding:10px 10px 0;color: #999;}
    .c7{padding: 10px;display: flex;z-index: 2;;background: #f9f9f9;position: fixed;align-items: center;justify-content: space-between;width: 750px;left:50%;margin-left: -294px;}
    .c8{position: absolute;left: 0;bottom: 0;font-size: 14px;line-height: 26px;width: 100%;background: rgba(0, 0, 0, .3);color: #fff;    text-overflow: ellipsis;
    overflow: hidden;padding: 0 5px;
    white-space: nowrap;
}
    .c9{background: rgba(0, 0, 0, 0.542);display: none;position: absolute;left:0;top: 0;width: 100%;height: 100%;line-height: 128px;}
    .c9 .layui-icon{font-size: 36px;color: #fff;}
    .c11{background: #c00;position: absolute;right:10px;top: 10px;text-align: center;cursor: pointer;height: 30px;width: 30px;line-height: 30px;display: none;}
    .c11 .layui-icon{font-size: 22px;color: #fff;}
    .c12{flex-wrap: wrap;display: flex;}
    .c12 > div{width: 150px;}
    .c13{
        width: 16px;
        height: 16px;
        position: relative;top:-2px;
        display: inline-block;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-image: url(/static/img/3.png);
        margin-right: 6px;
        background-position: -110px 0;
        vertical-align: top;
        vertical-align: middle;
    }
    #test-upload-more-list img{width: 100px;}
    .hr{margin:10px 0;height: 1px;background: #999;;}
    </style>
</head>
<body>
    
    <div class="c1" id="app" v-cloak>
        <div class="c2">
            <div :class="path==v.name?'active':''" v-for="(v,index) in arr" :key="index" @click="openDir(v.name)">
                <span class="c13"></span>{{v.name}}
            </div>
        </div>
        <div class="c3 ">
            <div class="c7">
                <div>{{path}} 目录下总共 {{list.length}} 个文件</div>
                <div class="c10">
                    <button class="layui-btn layui-btn-normal" id="upImg">上传新图片</button>
                    <button class="layui-btn" @click="subForm">确定使用</button>
                </div>
            </div>
            <div class="c6" v-if="Number(choiceNum)==1">
                <div v-if="newList.length">
                    <p>最新上传的图片</p>
                    <div class="c12">
                        <div v-for="(v,index) in newList" :key="index+keyIndex" class="c5">
                            <div  @click="activeImg(v,index,2)" :class="newActiveImgindex == index?'c4 active':'c4'" :style="'background-image:url('+v.src+')'">
                                <div class="c8">{{v.name}}</div>
                                <div class="c9"><i class="layui-icon layui-icon-ok"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hr"></div>
                <div class="c12">
                    <div v-for="(v,index) in list" :key="index+keyIndex" class="c5">
                        <div  @click="activeImg(v,index,1)" :class="activeImgindex == index?'c4 active':'c4'" :style="'background-image:url(/uploads/'+path+'/'+v.name+')'">
                            <div class="c8">{{v.name}}</div>
                            <div class="c9"><i class="layui-icon layui-icon-ok"></i></div>
                        </div>
                        <div class="c11" @click="delImg(v,index)"><i class="layui-icon layui-icon-delete"></i></div>
                    </div>
                </div>
            </div>
            <div class="c6" v-if="Number(choiceNum)!=1">
                <div v-if="newList.length">
                    <p>最新上传的图片</p>
                    <div class="c12">
                        <div v-for="(v,index) in newList" :key="index+keyIndex" class="c5">
                            <div  @click="checkedImg(v,index,2)" :class="v.checked?'c4 active':'c4'" :style="'background-image:url('+v.src+')'">
                                <div class="c8">{{v.name}}</div>
                                <div class="c9"><i class="layui-icon layui-icon-ok"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hr"></div>
                <div class="c12">
                    <div v-for="(v,index) in list" :key="index+keyIndex" class="c5">
                        <div  @click="checkedImg(v,index,1)" :class="v.checked?'c4 active':'c4'" :style="'background-image:url(/uploads/'+path+'/'+v.name+')'">
                            <div class="c8">{{v.name}}</div>
                            <div class="c9"><i class="layui-icon layui-icon-ok"></i></div>
                        </div>
                        <div class="c11" @click="delImg(v,index)"><i class="layui-icon layui-icon-delete"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../../static/plug_in/jquery-1.9.1.min.js"></script>
    <script src="../../../static/layuiadmin/layui/layui.js"></script>
    <script src="../../../static/plug_in/vue/vue.min.js"></script>
    <script>
        var index;
        var arr = {$dirData|raw};
        var list = {$list|raw};
        var inputClass = '{$class}';
        var choiceNum = '{$num}';
        var inputIndex = '{$index}';
        let listArr = [];
        for(let i in list){
            listArr.push({name:list[i],checked:false})
        }
        
        let anVue = new Vue({
            el:"#app",
            data:{
                path:arr[0].name,//默认选中的文件目录
                list:listArr,//图片列表
                newActiveImgindex:null,//选中最新上传的index
                newActiveImgName:null,//选中最新上传的图片名称
                activeImgindex:null,//选中的index
                activeImgName:null,//选中的图片名称
                choiceNum:choiceNum,//判断是否需要多选1为单选 否则 多选
                keyIndex:1,//用来刷新组件的
                newList:[],//新上传的图片列表

            },
            mounted() {
                let _this = this;
                layui.use(['layer','upload'], function(){
                    var layer = layui.layer;
                    var upload = layui.upload;
                    index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        //多图片上传
                    upload.render({
                        elem: '#upImg'
                        ,url: "{:url('upImg')}"
                        ,multiple: true
                        ,size: 2048 //限制文件大小，单位 KB
                        ,before: function(obj){
                            //预读本地文件示例，不支持ie8
                            obj.preview(function(index, file, result){
                                console.log(file);
                                _this.newList.unshift({id:index,src:result,path:'',name:'上传中',checked:false})
                            });
                        }
                        ,done: function(res,index){
                            if(res.code == 1){
                                for(let i in _this.newList){
                                    if(_this.newList[i].id == index){
                                        _this.newList[i].name = '已上传';
                                        _this.newList[i].path = res.data.replace(/\\/, "\/");
                                    }
                                }
                            }else{
                                _this.newList.splice(index, 1);
                                parent.layer.msg(res.msg);
                            }

                        }
                    });
                });  
            },
            methods: {
                //将目录发送给后台，返回该目录的所有文件
                openDir(path){
                    let _this = this;
                    layer.load(1);
                    $.post("{:url('img_list')}?class="+inputClass+"&num="+choiceNum,{path},function(res){
                        layer.closeAll('loading');
                        _this.path = path;
                        _this.list = []
                        _this.activeImgindex = null
                        _this.activeImgName = null
                        _this.newActiveImgindex = null
                        _this.newActiveImgName = null
                        for(let i in res){
                            _this.list.push({name:res[i],checked:false})
                        }
                    })
                },

                delImg(v,index){
                    let _this = this;
                    let path = '/uploads/'+_this.path+'/'+v.name;
                    layer.load(1);
                    $.post("{:url('del_img')}",{path},function(res){
                        layer.closeAll('loading');
                        parent.layer.msg(res.msg);
                        if(res.code == 1){
                            _this.list.splice(index, 1);
                        }
                    },'json')
                },

                //单选图片
                activeImg(v,index,type){
                    console.log(v);
                    
                    if(type == 1){
                        this.activeImgName = v.name;
                        this.activeImgindex = index;
                        this.newActiveImgName = null;
                        this.newActiveImgindex = null;
                    }else{
                        this.activeImgName = null;
                        this.activeImgindex = null;
                        this.newActiveImgName = v.path;
                        this.newActiveImgindex = index;
                    }
                },

                //多选图片
                checkedImg(v,index,type){
                    if(type == 1){
                        this.list[index].checked = !this.list[index].checked;
                    }else{
                        this.newList[index].checked = !this.newList[index].checked;
                    }
                    
                },

                subForm(type){
                    let _this = this;
                    //是否多选
                    if(Number(_this.choiceNum) == 1){
                        if(_this.activeImgName == null){
                            //选择了新上传图片
                            parent.layui.$("input."+inputClass).val('/'+_this.newActiveImgName);
                            if(inputClass == 'vue'){
                                window.parent.anVue.upVueData('/'+_this.newActiveImgName,inputIndex);
                            }else{
                                parent.layui.$("div."+inputClass).css('background-image','url(/'+_this.newActiveImgName+')');
                            }
                            
                        }else{
                            //选择列表里图片
                            parent.layui.$("input."+inputClass).val('/uploads/'+_this.path+'/'+_this.activeImgName);
                            if(inputClass == 'vue'){
                                window.parent.anVue.upVueData('/uploads/'+_this.path+'/'+_this.activeImgName,inputIndex);
                            }else{
                                parent.layui.$("div."+inputClass).css('background-image','url(/uploads/'+_this.path+'/'+_this.activeImgName+')');
                            }
                           
                            
                        }
                    }else{
                         //选择列表里图片
                        _this.list.forEach(v=>{
                            if(v.checked){
                                $("div."+inputClass,parent.document).append('<div class="c4" style="background-image:url(/uploads/'+_this.path+'/'+ v.name +')"><input type="hidden" name="imgs[]" value="/uploads/'+_this.path+'/'+ v.name +'"><div><i class="layui-icon layui-icon-delete"></i></div></div>');
                            }
                        })
                         //选择了新上传图片
                        _this.newList.forEach(v=>{
                            if(v.checked){
                                $("div."+inputClass,parent.document).append('<div class="c4" style="background-image:url(/'+v.path +')"><input type="hidden" name="imgs[]" value="/uploads/'+_this.path+'/'+ v.path +'"><div><i class="layui-icon layui-icon-delete"></i></div></div>');
                            }
                        })
                    }
                    parent.layer.close(index);
                }
            },
        })
    </script>
</body>
</html>